<template>
  <div>
    <u--form
      labelPosition="left"
      :model="form"
      :rules="rules"
      :labelWidth="75"
      labelAlign="right"
      ref="form"
    >
      <u-form-item label="这是一个字符串" prop="consignee" borderBottom>
        <u--input
          v-model="form.consignee"
          placeholder="请输入收货人"
          border="bottom"
        ></u--input>
      </u-form-item>

      <u-form-item label="这是一个数字集合" prop="mobile" borderBottom>
        <u--input
          v-model="form.mobile"
          placeholder="请输入数字集合"
          type="number"
          minlength="11"
          maxlength="11"
          border="bottom"
        ></u--input>
      </u-form-item>

      <!-- 地区 -->
      <u-form-item
        label="选择干嘛"
        prop="region_text"
        @click="RegionShow = true"
      >
        <pick-regions :defaultRegion="form.region" @getRegion="handleGetRegion">
          <u--input
            v-model="form.region_text"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择干嘛"
            border="none"
          >
          </u--input>
          <u-icon slot="right" name="arrow-right"> </u-icon>
        </pick-regions>
        <u-icon slot="right" name="arrow-right"> </u-icon>
      </u-form-item>

      <u-form-item label="详细动作" prop="address" borderBottom>
        <u--input
          v-model="form.address"
          placeholder="请输入详细地址"
          border="bottom"
        ></u--input>
      </u-form-item>

      <u-form-item label=" " prop="status" borderBottom>
        <u-checkbox-group
          v-model="checkboxValue1"
          placement="column"
          @change="checkboxChange"
        >
          <u-checkbox label="设置默认字符串" name="1"> </u-checkbox>
        </u-checkbox-group>
      </u-form-item>
    </u--form>

    <u-button
      type="primary"
      @click="updateSave"
      :custom-style="addressBtn"
      text="保存你好"
    ></u-button>
    <!-- 消息提示的组件 -->
    <u-toast ref="notice"></u-toast>
  </div>
</template>
<script>
// 引用地区选择组件
import pickRegions from '@/components/pick-regions/pick-regions.vue';
export default {
  components: {
    pickRegions
  },
  onLoad: function (option) {
    this.addressId = option.addr
    this.AddressIndex()

  },
  onShow() {
    // 让表单绑定的验证规则生效
    this.$refs.form.setRules(this.rules)
  },
  data() {
    return {
      rules: {
        consignee: [{
          required: true,
          message: '请输入收货人',
          trigger: ['change', 'blur'],
        }],
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur'],
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              return uni.$u.test.mobile(value);
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur'],
          }
        ],
        region_text: [
          {
            required: true,
            message: '请选择地区',
            trigger: ['change', 'blur'],
          }
        ],
        address: [
          {
            required: true,
            message: '请输入详情地址',
            trigger: ['change', 'blur'],
          }
        ],
      },
      checkboxValue1: [],
      addressBtn: {
        top: '3em',
        width: '100%',
        backgroundColor: '#4ea9f5',
        borderRadius: '0px',
        color: '#fff',
      },
      RegionShow: false,
      RegionCode: null,
      form: {
        consignee: '',
        mobile: '',
        address: '',
        region_text: '',
        region: [],
      },
      addressData: [],
      addressId: 0
    }
  },
  methods: {
    checkboxChange(item) {
      console.log(item);
    },
    async AddressIndex() {
      let data = {
        addrid: this.addressId
      }
      let result = await this.$u.api.user.AddressInfo(data)
      //   console.log(result.data);
      if (result.code === 0) {
        this.$refs.uNotify.show({
          type: 'error',
          message: result.msg,
          duration: 1500
        })
        return false
      }
      this.addressData = result.data
      this.form.consignee = this.addressData.consignee
      this.form.address = this.addressData.address
      this.form.mobile = this.addressData.mobile
      if (result.data.status == 1) {
        this.checkboxValue1.push("1")
      }
      this.form.region_text = this.addressData.districts.province + "-" + this.addressData.districts.city + "-" + this.addressData.districts.district
      let region = []
      if (result.data.province) {
        region.push(result.data.provinces.name)
      }

      if (result.data.city) {
        region.push(result.data.citys.name)
      }

      if (result.data.district) {
        region.push(result.data.districts.name)
      }
      this.form.region = region
      // console.log(this.addressData);
    },
    handleGetRegion(item) {
      // 获取到选中的省，市，区
      let [province, city, district] = item

      // 定义字符串 => 存选中的地区文本
      let region_text = ''

      // 存选中的地区码
      let code = null

      let region = []

      if (province) {
        region_text += province.name + '-'
        region.push(province.name)
        code = province.code
      }

      if (city) {
        region_text += city.name + '-'
        region.push(city.name)
        code = city.code
      }

      if (district) {
        region_text += district.name
        region.push(district.name)
        code = district.code
      }

      this.form.region_text = region_text
      this.form.region = region
      console.log(region);
      this.RegionCode = code

    },
    updateSave() {
      this.$refs.form.validate().then(async res => {

        let data = {
          id: this.addressData.id,
          name: this.form.consignee,
          tel: this.form.mobile,
          addressDetail: this.form.address,
          userid: this.addressData.userid,
        }

        if (this.checkboxValue1) {
          data.isDefault = this.checkboxValue1[0]
        } else {
          data.isDefault = 0
        }

        if (this.RegionCode) {
          data.areaCode = this.RegionCode
        }

        // console.log(data);
        let result = await this.$u.api.user.AddressUpdate(data)

        if (result.code == 1) {
          this.$refs.notice.show({
            type: 'success',
            message: result.msg,
            icon: true,
            complete: () => {
              this.$u.route({
                url: '/pages/address/index',
                type: 'navigateTo'
              })
            }
          })
        } else {
          this.$refs.notice.show({
            type: 'error',
            message: result.msg,
            icon: true,
          })
        }

      }).catch(errors => {
        this.$refs.notice.show({
          type: 'error',
          message: errors[0].message,
          icon: true
        })
      })
    }
  },
}
</script>
<style>
</style>